<template>
  <view class="query">
    <van-dropdown-menu active-color="#3775F2">
      <van-dropdown-item
        :value="query.tag_id"
        @change="changeHandle"
        :options="tagList"
        data-type="tag_id"
        popup-style="border-radius:0 0 32rpx 32rpx"
      />
      <van-dropdown-item
        :value="query.publish_date_type"
        popup-style="border-radius:0 0 32rpx 32rpx"
        :options="publishDate"
        @change="changeHandle"
        data-type="publish_date_type"
      />
      <van-dropdown-item
        :value="query.age_type"
        @change="changeHandle"
        data-type="age_type"
        :options="ageList"
        popup-style="border-radius:0 0 32rpx 32rpx"
      />
      <van-dropdown-item :title="moreTitle" ref="moreEle" popup-style="border-radius:0 0 32rpx 32rpx">
        <view class="dropdown-box">
          <view class="box-list">
            <view class="title">拿货数量</view>
            <view class="list">
              <text
                class="list-item"
                v-for="item in takeList"
                :key="item.value"
                @click="chooseHandle('take_nums_type', item.value)"
                :class="item.value === query.take_nums_type ? 'active' : ''"
                >{{ item.name }}</text
              >
            </view>
          </view>
          <view class="box-list">
            <view class="title">货品类型</view>
            <view class="list">
              <text
                class="list-item"
                v-for="item in wholeList"
                :key="item.value"
                @click="chooseHandle('is_whole', item.value)"
                :class="item.value === query.is_whole ? 'active' : ''"
                >{{ item.name }}</text
              >
            </view>
          </view>
          <view class="box-list">
            <view class="title">信息类型</view>
            <view class="list">
              <text
                class="list-item"
                v-for="item in infoList"
                :key="item.value"
                @click="chooseHandle('goods_type', item.value)"
                :class="item.value === query.goods_type ? 'active' : ''"
                >{{ item.name }}</text
              >
            </view>
          </view>
          <view class="dropdown-opt">
            <view class="opt-btn" @click="resetHandle">重置</view>
            <view class="opt-btn" @click="changeHandle">确定</view>
          </view>
        </view>
      </van-dropdown-item>
    </van-dropdown-menu>
  </view>
</template>

<script>
import { reactive, toRefs, ref } from 'vue'
import { useUserStore } from '@/store/modules/user'
import { onShow } from '@dcloudio/uni-app'
export default {
  name: 'query',
  props: {},
  setup(props, { emit }) {
    const userStore = useUserStore()
    const moreEle = ref()
    const state = reactive({
      tagList: [],
      publishDate: [],
      ageList: [],
      takeList: [],
      wholeList: [],
      infoList: [],
      moreTitle: '更多',
      query: {
        age_type: '',
        tag_id: '',
        publish_date_type: '',
        take_nums_type: '',
        is_whole: '',
        goods_type: '',
      },
      toggle: false,
    })
    const resetList = () => {
      const all = {
        name: '全部',
        value: '',
      }
      state.tagList = [
        {
          text: '标签',
          value: '',
        },
      ]
      state.publishDate = [
        {
          text: '发布时间',
          value: '',
        },
      ]
      state.ageList = [
        {
          text: '年龄',
          value: '',
        },
      ]
      const { tag_id, publish_date_type, age_type, take_nums_type, is_whole, goods_type } = userStore.getField()
      tag_id.forEach((item) => {
        state.tagList.push({
          text: item.name,
          value: item.value.toString(),
        })
      })
      publish_date_type.forEach((item) => {
        state.publishDate.push({
          text: item.name,
          value: item.value.toString(),
        })
      })
      age_type.forEach((item) => {
        state.ageList.push({
          text: item.name,
          value: item.value.toString(),
        })
      })
      state.takeList = [{ ...all }, ...take_nums_type]
      state.wholeList = [{ ...all }, ...is_whole]
      state.infoList = [{ ...all }, ...goods_type]
    }
    const chooseHandle = (type, value) => {
      state.query[type] = value
    }
    const resetHandle = () => {
      const reset = {
        take_nums_type: '',
        is_whole: '',
        goods_type: '',
      }
      state.query = { ...state.query, ...reset }
    }
    const changeHandle = (e) => {
      if (e.target.dataset.type) {
        state.query[e.target.dataset.type] = e.detail
      } else {
        moreEle.value.toggle()
      }
      emit('changeQuery', state.query)
    }
    onShow(() => {
      resetList()
    })
    return {
      ...toRefs(state),
      resetList,
      chooseHandle,
      changeHandle,
      resetHandle,
      moreEle,
    }
  },
}
</script>

<style lang="scss" scoped>
.query {
  transition: 2s;
  &-cross {
    position: relative;
    z-index: 3;
    height: 56rpx;
    padding: 24rpx;
    background: #ffffff;
    border-radius: 32rpx 32rpx 0rpx 0rpx;
    .cross-box {
      display: flex;
      overflow-x: auto;
      .cross-item {
        flex-shrink: 0;
        font-weight: 400;
        color: #6c7385;
        line-height: 48rpx;
        height: 56rpx;
        font-size: 28rpx;
        margin-right: 32rpx;
        &.active {
          color: #2b303b;
          font-weight: bold;
          background: url('~@/static/images/icon/icon-1.png') no-repeat center bottom;
          background-size: 24rpx 8rpx;
        }
      }
    }
    .cross-option {
      position: absolute;
      top: 24rpx;
      right: 24rpx;
      height: 48rpx;
      padding-left: 5rpx;
      display: flex;
      align-items: center;
      background: #fff;
      .iconfont {
        font-size: 32rpx;
      }
    }
  }
  .query-all {
    display: flex;
    flex-wrap: wrap;
    position: fixed;
    left: 0;
    z-index: 3;
    width: calc(100% - 48rpx);
    padding: 0 24rpx 24rpx;
    background: #fff;
    border-radius: 0rpx 0rpx 32rpx 32rpx;
    .cross-item {
      width: 122rpx;
      height: 64rpx;
      padding: 0 20rpx;
      text-align: center;
      line-height: 64rpx;
      font-size: 24rpx;
      margin: 0 12rpx 10rpx 0;
      color: #2b303b;
      background: #f5f6fa;
      border: 2rpx solid #f5f6fa;
      border-radius: 32rpx 32rpx 32rpx 32rpx;
      &:nth-child(4n) {
        margin-right: 0;
      }
      @include text-ellipsis(1);
      &.active {
        background: none;
        border-color: #3775f2;
        color: #3775f2;
      }
    }
  }
  .query-bg {
    position: absolute;
    height: 100vh;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 2;
    transition: 2s;
    background: rgba(0, 0, 0, 0.3);
  }
}
.dropdown-box {
  padding: 24rpx 24rpx 0;
  .box-list {
    .title {
      height: 48rpx;
      font-size: 32rpx;
      font-weight: 500;
      color: #2b303b;
      line-height: 48rpx;
      margin-bottom: 12rpx;
    }
    .list {
      display: flex;
      flex-wrap: wrap;
      margin: 0 -5rpx 19rpx;
    }
    .list-item {
      display: block;
      min-width: 128rpx;
      padding: 0 20rpx;
      height: 64rpx;
      background: #f5f6fa;
      border-radius: 32rpx;
      font-size: 28rpx;
      color: #555b66;
      line-height: 64rpx;
      text-align: center;
      margin: 0 5rpx 10rpx;
      border: 2rpx solid #f5f6fa;
      &.active {
        background: #e5eeff;
        border-color: #3775f2;
        color: #3775f2;
        background: #fff;
      }
    }
  }
  .dropdown-opt {
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: 16rpx 0 32rpx;
    .opt-btn {
      width: 343rpx;
      height: 84rpx;
      background: #ff8345;
      border-radius: 40rpx;
      line-height: 84rpx;
      font-size: 32rpx;
      color: #fff;
      text-align: center;
      &:nth-child(2) {
        background: #3775f2;
      }
    }
  }
}
</style>
